{% extends 'base_no_cart.html' %}

{% load staticfiles %}

{% block title %}
    天天生鲜-购物车
{% endblock title %}

{% block page_title %}
    购物车
{% endblock page_title %}

{% block body %}
    <div class="total_count">全部商品<em>{{ total_count }}</em>件</div>
    <ul class="cart_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col02">商品单位</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
        <li class="col06">操作</li>
    </ul>
    <form method="post" action="/order/place">
        {% for sku in sku_list %}
            <ul class="cart_list_td clearfix">
                <li class="col01"><input type="checkbox" name="sku_ids" value="{{ sku.id }}" checked></li>
                <li class="col02"><a href="{% url 'goods:detail'  sku.id %}"><img src="{% static sku.image.url %}"></a>
                </li>
                <li class="col03">{{ sku.name }}<br><em>{{ sku.price }}元/{{ sku.unite }}</em></li>
                <li class="col04">{{ sku.unite }}</li>
                <li class="col05">{{ sku.price }}元</li>
                <li class="col06">
                    <div class="num_add">
                        {% csrf_token %}
                        <a href="javascript:;" class="add fl">+</a>
                        <input type="text" sku_id="{{ sku.id }}" class="num_show fl" value="{{ sku.count }}">
                        <a href="javascript:;" class="minus fl">-</a>
                    </div>
                </li>
                <li class="col07">{{ sku.amount }}元</li>
                <li class="col08"><a href="javascript:;">删除</a></li>
            </ul>
        {% endfor %}

        <ul class="settlements">
            <li class="col01"><input type="checkbox" name="" checked=""></li>
            <li class="col02">全选</li>
            <li class="col03">合计(不含运费)：<span>¥</span><em>{{ total_amount }}</em><br>共计<b>{{ total_count }}</b>件商品</li>
            <li class="col04"><input type="submit" value="去结算"></li>
        </ul>
    </form>
{% endblock body %}

{# 网页底部引入文件块 #}
{% block bottomfiles %}
    <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script>
        // 计算被选中的商品的总件数和总价数
        function update_page_info() {
            total_count = 0
            total_amount = 0
            // 获取所有被选中的商品的checkedbox $('.cart_list_td').find(':checked')
            // 获取所有被选中的商品所在的ul元素
            $('.cart_list_td').find(':checked').parents('ul').each(function () {
                count = $(this).find('.num_show').val()
                amount = $(this).children('.col07').text()
                // 累加计算商品的总件数和总价数
                count = parseInt(count)
                amount = parseFloat(amount)
                total_count += count
                total_amount += amount
            })
            $('.settlements').find('em').text(total_amount.toFixed(2))
            $('.settlements').find('b').text(total_count)
        }

        // 计算商品的小计
        function update_goods_amount(sku_url) {
            // 获取商品的价格和数量
            price = sku_url.children('.col05').text()
            count = sku_url.find('.num_show').val()
            // 计算总价
            price = parseFloat(price)
            amount = price * count
            // 设置商品的总价格
            sku_url.children('.col07').text(amount.toFixed(2) + '元')

        }

        // 商品的全选和全不选
        $('.settlements ').find(':checkbox').change(function () {
            // 获取全选的checkbox的选中状态
            is_checked = $(this).prop('checked')
            // 遍历商品的对应checkbox,设置这些checkbox的选中状态和全选的checkbox保持一致
            $('.cart_list_td').find(':checkbox').each(function () {
                $(this).prop('checked', is_checked)
            })
            // 调用重新计算总件数和总价格的方法
            update_page_info()
        })

        // 商品对应的checkbox状态发生改变时,设置全选checkbox的状态
        $('.cart_list_td').find(':checkbox').change(function () {
            // 获取页面上所有商品的数量
            all_len = $('.cart_list_td').length
            // 获取所有被选的商品的数目
            checked_len = $('.cart_list_td').find(':checked').length
            is_checked = true
            if (checked_len < all_len) {
                is_checked = false
            }
            $('.settlements ').find(':checkbox').prop('checked', is_checked)
            // 调用重新计算总件数和总价格的方法
            update_page_info()
        })

        update_success = true
        total = 0

        // 更新购物车记录
        function update_remote_cart_info(sku_id, count) {
            csrf = $('input[name="csrfmiddlewaretoken"]').val()
            // 组织参数
            params = {'count': count, 'sku_id': sku_id, 'csrfmiddlewaretoken': csrf}
            // 设置ajax 为同步
            $.ajaxSettings.async = false
            // 默认发起的ajax请求都是异步的,发送ajax请求
            $.post('/cart/update', params, function (data) {
                if (data.res != 5) {
                    // 更新失败
                    update_success = false
                    alert(data.errmsg)
                    // 库存不足时
                    if (data.res == 4) {
                        return false
                    }
                    return true
                } else {
                    update_success = true
                    total = data.total_count
                    return true
                }
            })
            // 设置ajax 为异步
            $.ajaxSettings.async = true
        }

        // 购物车商品数量增加
        $('.add').click(function () {
            count = $(this).next().val()
            count = parseInt(count) + 1
            if (count >= 9999) {
                count = 9999
            }
            sku_id = $(this).next().attr('sku_id')
            // 更新购物车记录
            update_remote_cart_info(sku_id, count)
            if (update_success) {
                // 将商品添加后的数量重新赋值
                $(this).next().val(count)
                // 计算每件商品的小计
                update_goods_amount($(this).parents('ul'))
                // 获取商品对应的checkbox的选中状态,如果被选中,更新页面信息
                is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
                if (is_checked) {
                    // 调用重新计算总件数和总价格的方法
                    update_page_info()
                }
                // 更新页面上购物车上的总件数
                $('.total_count').children('em').text(total)
            } else {
                $(this).next().val(count - 1)
            }
        })

        // 购物车商品数量减少
        $('.minus').click(function () {
            count = $(this).prev().val()
            count = parseInt(count) - 1
            if (count < 1) {
                count = 1
                return
            }
            sku_id = $(this).prev().attr('sku_id')
            // 更新购物车记录
            update_remote_cart_info(sku_id, count)
            if (update_success) {
                // 将商品添加后的数量重新赋值
                $(this).prev().val(count)
                // 计算每件商品的小计
                update_goods_amount($(this).parents('ul'))
                // 获取商品对应的checkbox的选中状态,如果被选中,更新页面信息
                is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
                if (is_checked) {
                    // 调用重新计算总件数和总价格的方法
                    update_page_info()
                }
                // 更新页面上购物车上的总件数
                $('.total_count').children('em').text(total)
            }
        })

        // 记录用户输入之前商品的数量
        pre_count = 1
        $('.num_show').focus(function () {
            pre_count = $(this).val()
        })

        // 手动输入商品的数量
        $('.num_show').blur(function () {
            // 获取用户输入的数目
            count = $(this).val()
            sku_id = $(this).attr('sku_id')
            // 校验输入的内容
            if (isNaN(count) || count.trim().length == 0 || parseInt(count) <= 0) {
                // count = 1
                // 设置商品数量为用户输入之前的数目
                $(this).val(pre_count)
                return
            } else if (parseInt(count) >= 9999) {
                count = 9999
            } else {
                count = parseInt(count)
            }
            // 更新购物车记录
            update_remote_cart_info(sku_id, count)
            if (update_success) {
                // 将商品添加后的数量重新赋值
                $(this).val(count)
                // 计算每件商品的小计
                update_goods_amount($(this).parents('ul'))
                // 获取商品对应的checkbox的选中状态,如果被选中,更新页面信息
                is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
                if (is_checked) {
                    // 调用重新计算总件数和总价格的方法
                    update_page_info()
                }
                // 更新页面上购物车上的总件数
                $('.total_count').children('em').text(total)
            } else {
                $(this).val(pre_count)
                return
            }
        })

        // 删除购物车记录
        $('.cart_list_td').children('.col08').children('a').click(function () {
            // 获取商品id
            sku_id = $(this).parents('ul').find('.num_show').attr('sku_id')
            csrf = $('input[name="csrfmiddlewaretoken"]').val()
            // 组织参数
            params = {'sku_id': sku_id, 'csrfmiddlewaretoken': csrf}
            // 获取商品所在的ul元素
            sku_ul = $(this).parents('ul')
            total_count = 0
            $.post('/cart/delete', params, function (data) {
                if (data.res != 3) {
                    alert(data.errmsg)
                } else {
                    // 删除成功,移除页面上该商品记录
                    sku_ul.remove()
                    // 获取sku_ul中商品选中的状态
                    is_checked = sku_ul.find(':checkbox').prop('checked')
                    if (is_checked) {
                        // 调用重新计算总件数和总价格的方法
                        update_page_info()
                    }
                    total_count = data.total_count
                    // 更新页面上购物车上的总件数
                    $('.total_count').children('em').text(total_count)
                }
            })
        })


    </script>
{% endblock bottomfiles %}
